import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import cakeflakes from "@/common/cakeflakes";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Crabdetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prodetail: {},
            iscollect: false
        }
    }

    componentDidMount() {
        let getconfig = async function () {
            let res = await util.rjax({
                url: "/wx/getwx?url=" + encodeURIComponent(window.location.href.split('#')[0]),
                type: "POST"
            })
            if (res) {
                wx.config({
                    debug: false,
                    appId: 'wxeaccffdd3826280c', // 必填，公众号的唯一标识
                    timestamp: parseInt(res.data.timestamp),// 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr,// 必填，生成签名的随机串
                    signature: res.data.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// 必填，需要使用的JS接口列表
                })
            }
        }
        getconfig()

        // var that = this
        var proid = util.getQuery().id;
        var openid = sessionStorage.getItem('openid')
        wx.ready(function () {
            //朋友圈
            wx.onMenuShareTimeline({// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '苏e融喜迎国庆！助力夺大奖！', // 分享标题
                link: 'http://www.rongsue.com/wechat/crabshare.html?id=' + proid + "&uid=" + openid, // 分享链接
                imgUrl: 'http://img0.rongsue.com/FoCM38f9Tm0cNkvg8NasnlmGqEsh',
                success: function (res) {
                    // that.setState({ share: true })
                    // alert("分享成功")
                },
                cancel: function (res) {
                    // alert("取消了分享")
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });

            //朋友
            wx.onMenuShareAppMessage({//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '苏e融喜迎国庆！助力夺大奖！', // 分享标题
                desc: '“Disney黄金双挂坠项链、阳澄湖大闸蟹、九阳多功能家电烤箱、车载净化器....”', // 分享描述
                link: 'http://www.rongsue.com/wechat/crabshare.html?id=' + proid + "&uid=" + openid, // 分享链接
                imgUrl: 'http://img0.rongsue.com/FoCM38f9Tm0cNkvg8NasnlmGqEsh', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {// 用户确认分享后执行的回调函数
                    // alert("分享成功")
                    jquery(".dialog").css('display', "none")
                },
                cancel: function () { // 用户取消分享后执行的回调函数
                    // alert("取消了分享")
                    jquery(".dialog").css('display', "none")
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        });

        this.prodetail()
        this.iscollect()

        jquery(".closedialog").click(function () {
            jquery(".dialog").hide()
        })


        var that = this
        jquery(".btnwrite").click(function () {
            if (jquery('.btnwrite').html() === '喊好友助力') {
                if (that.state.overplus <= 0) {
                    layer.open({
                        content: "您来晚了，奖品发完了哦",
                        btn: "好的"
                    })
                } else {
                    jquery(".dialog").css('display', "block")
                }
            } else if (jquery('.btnwrite').html() === '您已经助力成功了') {
                layer.open({
                    content: '您已经助力成功了,赶紧去抢其他奖品吧 ',
                    btn: "好的"
                })
            }
        })
    }

    async prodetail() {
        var proid = util.getQuery().id;
        let res = await util.rjax({
            url: '/prize/getPrize/?prizeId=' + proid + '&type=1',
            type: 'get',
        })
        this.setState({ prodetail: res.data });
        this.setState({ overplus: this.state.prodetail.total - this.state.prodetail.count })
    }

    async iscollect() {
        var openid = sessionStorage.getItem('openid')
        // var openid = 'odPDN0Rom1s7lZPMrDv51k_8_WHw';
        var proid = util.getQuery().id;
        let res = await util.rjax({
            url: '/assist/assistCount?prizeId=' + proid + '&openId=' + openid,
            type: 'get',
        })
        console.log('iscollect:  ' + res)
        if (!res.data - this.state.prodetail.total >= 0) {
            this.setState({ iscollect: true });
        } else {
            this.setState({ iscollect: false });
        }
    }


    render() {
        return (
            <div>
                <div id="crab">
                    <div className='crabtop'>
                        <img className="toppic" src="/assets/wechat/crabtop_pic.png" alt="" />
                    </div>
                    <div className="crabcard">
                        <div style={{ position: 'relative' }}>
                            <img className="crabpic" src={this.state.prodetail.image} alt="" />
                        </div>
                        <p className="crabintr">{this.state.prodetail.introduction}</p>
                        <p className="guys">要求：需{this.state.prodetail.assistCount}个好友助力，先到先得</p>
                        <p className="crabnum">
                            <span>数量：<i>{this.state.prodetail.total}份</i></span>
                            <b></b>
                            <span>剩余：<i>{this.state.prodetail.total - this.state.prodetail.count}份</i></span>
                        </p>
                        <div className="btnbox" style={{ position: 'relative' }}>
                            <img className="btncall" src={this.state.iscollect ? "/assets/wechat/btn_disabled.png" : "/assets/wechat/btn_active.png"} alt="" />
                            <p className="btnwrite">{this.state.iscollect ? '您已经助力成功了' : '喊好友助力'}</p>
                        </div>
                        <a href={"./crabprogress.html?id=" + this.state.prodetail.id}>
                            <button className="progress">助力进度</button>
                        </a>
                        <img className="collectimg" style={{ 'display': this.state.iscollect ? 'block' : 'none' }} src="/assets/wechat/allcollect.png" alt="" />
                    </div>
                </div>
                <div className="dialog">
                    <img className="dialogbg" src="/assets/wechat/sharedialog.png" alt="" />
                    <p>点击右上角，分享给好友，让好友帮忙助力吧</p>
                    <img className="closedialog" src="/assets/wechat/close.png" alt="" />
                </div>

            </div>
        )
    }
}
ReactDom.render(<Crabdetail />, document.getElementById("app"));